<template>

    <van-skeleton>
        <template #template>
            <div>
                <van-image round width="100px" height="100px" :src="avatar" class="avatar_img" />
                <label class="nick">{{ hidephone }}</label>
            </div>
        </template>
    </van-skeleton>
    <van-form>
        <div class="login">
            <van-cell-group inset>
                <van-icon name="lock" class="lockicon" color="rgb(180, 180, 180)" />
                <van-field v-model="common_pwd" name="密码" :type="checked ? 'text' : 'password'" placeholder="登录密码"
                    :rules="[{ required: true, message: '' }]" class="pwd" />
                <t-switch v-model="checked" :label="['开', '.......']" class="change"></t-switch>
            </van-cell-group>
        </div>
        <div style="margin:20px;">
            <van-button round block type="primary" native-type="submit" style="border-radius: 10px;" @click="onlogin">
                登录
            </van-button>
        </div>
        <div class="forgetpwd" @click="forget_pwd">忘记登录密码</div>
        <div class="changelogin_method" @click="change_loginmethod">切换登录方式</div>
    </van-form>
    <div class="overlay" v-if="overlayshow">
        <div class="methods">
            <p name="手势" @click="login_gesture" class="gesture">手势密码</p>
            <p name="其他账号登录" @click="login_methods" class="other">使用其他账号登录</p>
        </div>
        <p name="手势" @click="cancel" class="cancel">取消</p>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
const router = useRouter()
let avatar = ref('');
let phone = ref('')
let hidephone = ref('')
let common_pwd = ref('')
let checked = ref(true);
let overlayshow = ref(false)
let avatar_img = ref('')

onMounted(() => {
    phone.value = localStorage.getItem('reginame')
    console.log("<<<<<<account", phone.value)
    hidephone.value = phone.value.slice(0, 3) + "****" + phone.value.slice(-4)
    http.get('/patient/register_login/', {
        params: {
            phone: phone.value,
        }
    }).then(response => {
        console.log('请求成功', response.data);
        avatar.value = response.data.avatar;
        avatar_img.value = localStorage.setItem('avatar', avatar.value)
    })
        .catch(error => {
            console.error('请求失败', error);
        });
})

function onlogin() {
    const data = {
        phone: phone.value,
        common_pwd: common_pwd.value
    }
    http.post('/patient/register_login/', data).then(res => {
                router.push('/index')
                alert('登录成功')
    }).catch(err => {
        console.log("请求失败", err);
    })
}


function forget_pwd() {
    router.push('/resetpwd')
}
function change_loginmethod() {
    overlayshow.value = true
}
function login_gesture() {
    router.push('/gesture')
}

function login_methods() {
    router.push('/first_login')
}
function cancel() {
    overlayshow.value = false
}
</script>
<style scoped>
.div {
    position: relative;
}

.avatar_img {
    position: absolute;
    width: 100px;
    margin: 40px 33%;
}

.nick {
    position: absolute;
    margin: 10px 35%;
    top: 160px;
}

.login {
    position: relative;
    border: 1px solid rgb(230, 230, 230);
    margin: 250px 20px 0 20px;
}

.lockicon {
    position: absolute;
    top: 14px;
    left: 30px;
}

.uname,
.pwd {
    margin-left: 40px;
}

.change {
    position: absolute;
    width: 50px;
    top: 25%;
    right: 15%;
}

.forgetpwd {
    position: absolute;
    left: 20%;
    color: #1989fa;
}

.changelogin_method {
    position: absolute;
    right: 20%;
    color: #1989fa;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.methods {
    position: absolute;
    width: 80%;
    bottom: 15%;
    margin: 0 10%;
    background-color: white;
    text-align: center;
    border-radius: 10px;
    color: #1989fa;
    z-index: 4;
}

.gesture,
.other {
    border: 1px solid rgb(249, 247, 247);

}

.cancel {
    position: absolute;
    width: 80%;
    height: 50px;
    line-height: 50px;
    bottom: 5%;
    margin: 0 10%;
    margin-top: 50px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    color: #1989fa;
}
</style>